<template>
<bm-overlay ref="customOverlay" :class="paramsAtrr.zoom > paramsAtrr.ZOOMBOUNDARY ? 'imgZoneWidth':(getTraversalData().length > 1 ? 'maxSize' :'minSize')"
   pane="labelPane" @draw="draw" class="zone">
  <div v-if="paramsAtrr.zoom > paramsAtrr.ZOOMBOUNDARY">
    <img :src="getImgSrc()" alt="" style="display:inline-block;width:30px;height:30px;vertical-align:center">
  </div>
  <div v-else>
    <p>{{text.districtName}}</p>
    <p v-for="item in getTraversalData()">{{item.typeName}}：{{item.num}}</p>
  </div>
</bm-overlay>
</template>

<script>
import type1ActiveImg from '@/assets/type1Active.png'
import type2ActiveImg from '@/assets/type2Active.png'
import type3ActiveImg from '@/assets/type3Active.png'
import type4ActiveImg from '@/assets/type4Active.png'
export default {
  props: {
    text: {
      type: Object,
      default: () => {}
    },
    position: {
      type: Object,
      default: () => {}
    },
    paramsAtrr: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    position: {
      handler() {
        this.$refs.customOverlay.reload()
      },
      deep: true
    }
  },
  methods: {
    draw({
      el,
      BMap,
      map
    }) {
      const {
        lng,
        lat
      } = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 42 + 'px'
      el.style.top = pixel.y - 42 + 'px'
    },
    getImgSrc() {
      if (this.text.groundType == "1") {
        return type1ActiveImg
      } else if (this.text.groundType == "2") {
        return type2ActiveImg
      } else if (this.text.groundType == "3") {
        return type3ActiveImg
      } else {
        return type4ActiveImg
      }
    },
    getTraversalData() {
      let me = this;
      let arr = JSON.parse(JSON.stringify(me.text.children))
      if (me.paramsAtrr.typeOptions.length > 0) {
        if (me.paramsAtrr.currentType == '-1') {
          let result = arr.map(item => {
            return Object.assign({}, {
              typeName: me.paramsAtrr.typeOptions.find(x => x.id == item.groundType).name,
              num: item.total
            });
          });
          return result
        } else {
          let result = arr.filter(x => x.groundType == me.paramsAtrr.currentType).map(item => {
            return Object.assign({}, {
              typeName: me.paramsAtrr.typeOptions.find(x => x.id == item.groundType).name,
              num: item.total
            });
          });
          return result
        }
      } else {
        return []
      }

    }
  }
}
</script>

<style lang="less" scoped>
.zone {
    transition: background-color 0.15s ease-in-out;
    display: flex;
    align-items: center;
    font-size: 12px;
    background-color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: black;
    text-align: center;
    padding: 10px;
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 0 4px #999;
    box-sizing: border-box;
    &:hover {
        z-index: 1;
    }
    div {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        justify-content: space-between;
        p {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            margin: 0;
            text-align: center;
        }
    }
}
.imgZoneWidth {
    width: 50px;
    height: 50px;
    vertical-align: middle;
}
.zoneWidth {}
.maxSize {
    width: 125px;
    height: 125px;
}
.minSize {
    width: 100px;
    height: 100px;
}
</style>
